<extend name="Public:base" />
<block name="content">

<center>
	<h1>聊天窗口</h1>
	<!-- <h4>当前登陆者：用户</h4> -->
	<!--显示聊天内容-->
	<div style="width:704px;height:502px;border:1px solid black">
		<div style="/*overflow: hidden;*/width:150px;height:500px;border:1px solid red;float:left;background-color:pink">
		<div style="width:148px;height:50px;background-color:orange;font-size:30px"> 在 线 客 服 </div>
			<select name="kefu" style="width:148px;height:40px">
				<foreach name="user" item="v">
				<if condition="($v['id'] neq session('home_id'))">
				<option value="{$v['id']}">{$v['username']}</option>
				</if>
				</foreach>
			</select>
			
		</div>
		<div id='box' style="width:550px;height:400px;float:left;border:1px solid green;background-color:yellow">
			<!-- <div id="top" style="width:550px;height:40px;float:left;border:1px solid red;background-color:green	"></div>	
			<div id="bottom" style="width:550px;height:355px;float:left;border:1px solid blue;background-color:blue"></div> -->
		</div><br>
		<!--发布聊天-->
		<textarea id='chats' cols="75" rows="4" style="resize:none;width:536px;height:90px;"> Alt+Enter发送消息</textarea>
	</div>
	<script type="text/javascript">
		var o=null;
		$('select[name="kefu"]').change(function(){
			
			clearInterval(o);//清楚第‘o’个定时器
			// console.log(o);
			var yid=$(this).val();
			var time1=null;
			$.ajax({
				url:'/home/chats/chats/touxiang',
				data:{'uid':yid},
				type:'get',
				dataType:'json',
				success:function(mes){
					if(mes['a']==2){
						// $('#box').empty();
						// str=$('<p style="text-align:left;margin:5px"><img style="width:30px;height:30px" src="'+mes['pic']+'"><span style="font-size:15px;color:red">您好,我是'+mes['name']+'请问您有什么需要咨询的呢？</span></p>');
						// $('#box').append(str);
					}else if(mes['a']==1){
							$('#box').empty();
							var str = '';
							for(var o=null in mes){
								if(mes[o]==1){
									continue;
								}
								var pos = (mes[o]['uid']==mes[o]['sessionid'])?'right':'left';
								if(mes[o]['uid']==mes[o]['sessionid']){
									str+='<p style="margin:5px;text-align:'+pos+'"><span style="font-size:15px;color:red">'+mes[o]['content']+':'+mes[o]['f_name']+'</span><img style="width:30px;height:30px" src="'+mes[o]['f_pic']+'"></p>';
								}else{

									str+='<p style="margin:5px;text-align:'+pos+'"><img style="width:30px;height:30px" src="'+mes[o]['u_pic']+'"><span style="font-size:15px;color:red">'+mes[o]['u_name']+':'+mes[o]['content']+'</span></p>';
								}
								
							}
							$('#box').append(str);
					}
					
				}
			});
			time1=setInterval(function(){
				$.ajax({
					url:'/home/chats/chats/touxiang',
					data:{'uid':yid},
					type:'get',
					dataType:'json',
					success:function(mes){
						console.log(mes);
						if(mes['a']==2){
							$('#box').empty();
							str=$('<p style="text-align:left;margin:5px"><img style="width:30px;height:30px" src="'+mes['pic']+'"><span style="font-size:15px;color:red">您好,我是'+mes['name']+'请问您有什么需要咨询的呢？</span></p>');
							$('#box').append(str);
						}else if(mes['a']==1){
								$('#box').empty();
								var str = '';
								for(var o=null in mes){
									if(mes[o]==1){
										continue;
									}
									var pos = (mes[o]['uid']==mes[o]['sessionid'])?'right':'left';
									if(mes[o]['uid']==mes[o]['sessionid']){
										str+='<p style="margin:5px;text-align:'+pos+'"><span style="font-size:15px;color:red">'+mes[o]['content']+':'+mes[o]['f_name']+'</span><img style="width:30px;height:30px" src="'+mes[o]['f_pic']+'"></p>';
									}else{

										str+='<p style="margin:5px;text-align:'+pos+'"><img style="width:30px;height:30px" src="'+mes[o]['u_pic']+'"><span style="font-size:15px;color:red">'+mes[o]['u_name']+':'+mes[o]['content']+'</span></p>';
									}
									
								}
								$('#box').append(str);
						}
						
					}
				});
			},1000);
			o = time1;
		});
		$(document).keydown(function(){
			 var oEvent=window.event;
			  if (oEvent.keyCode == 13 && oEvent.altKey) { 	
                // console.log("你按下了alt+0");  
                	var content=$('#chats').val();
                	var kefu=$('select[name="kefu"]').val();
                	// console.log(kefu);
					$.ajax({
						url:'/home/chats/chats/add',
						data:{'content':content,'yid':kefu},
						type:'post',
						success:function(mes){
							// console.log(mes);
							if(mes=='null'){
								// alert('null');
							}else if(mes=='yes'){
								// alert('yes');
							}else{
								// alert('no');
							}
						},
						async:false,
					});
					$('#chats').val('');
            }  
		});
	</script>
	
</center>	

</block>